{% extends "topic/visualization/result_basic.html" %}

{% block style %}
    <style>
       

        text {
            font-size: 11px;
            pointer-events: none;
        }

        text.parent {
            fill: #1f77b4;
        }

        circle {
            fill: #ccc;
            stroke: #999;
            pointer-events: all;
        }

        circle.parent {
            fill: #1f77b4;
            fill-opacity: .1;
            stroke: steelblue;
        }

        circle.parent:hover {
            stroke: #ff7f0e;
            stroke-width: 1px;
        }

        circle.child {
            pointer-events: none;
        }
    </style>
{% endblock %}

{% block mainbody %}
    <script type="text/javascript">
        var w, h, r, x, y, vis, node, first = true;
        window.addEventListener("message", function (evt) {
            var data = JSON.parse(evt.data);
            console.log(data);
            draw(data);
        }, false);


        function draw(data) {
            if (!first) {
                d3.select("svg").remove();
            }
            first = false;

            w = $("body").width();
            h = w / 1.4;
            r = 0.9 * h;
            x = d3.scale.linear().range([0, r]);
            y = d3.scale.linear().range([0, r]);
            var root;

            var pack = d3.layout.pack()
                    .size([r, r])
                    .value(function (d) {
                        return d.size;
                    });

            vis = d3.select("body").insert("svg:svg", "h2")
                    .attr("width", w)
                    .attr("height", h)
                    .append("svg:g")
                    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

            node = root = data;

            var nodes = pack.nodes(root);

            vis.selectAll("circle")
                    .data(nodes)
                    .enter().append("svg:circle")
                    .attr("class", function (d) {
                        return d.children ? "parent" : "child";
                    })
                    .attr("cx", function (d) {
                        return d.x;
                    })
                    .attr("cy", function (d) {
                        return d.y;
                    })
                    .attr("r", function (d) {
                        return d.r;
                    })
                    .on("click", function (d) {
                        return zoom(node == d ? root : d);
                    });

            vis.selectAll("text")
                    .data(nodes)
                    .enter().append("svg:text")
                    .attr("class", function (d) {
                        return d.children ? "parent" : "child";
                    })
                    .attr("x", function (d) {
                        return d.x;
                    })
                    .attr("y", function (d) {
                        return d.y;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .style("opacity", function (d) {
                        return d.r > 20 ? 1 : 0;
                    })
                    .text(function (d) {
                        return d.name;
                    });

            d3.select(window).on("click", function () {
                zoom(root);
            });
        }


        function zoom(d) {
            var k = r / d.r / 2;
            x.domain([d.x - d.r, d.x + d.r]);
            y.domain([d.y - d.r, d.y + d.r]);

            var t = vis.transition()
                    .duration(d3.event.altKey ? 7500 : 750);

            t.selectAll("circle")
                    .attr("cx", function (d) {
                        return x(d.x);
                    })
                    .attr("cy", function (d) {
                        return y(d.y);
                    })
                    .attr("r", function (d) {
                        return k * d.r;
                    });

            t.selectAll("text")
                    .attr("x", function (d) {
                        return x(d.x);
                    })
                    .attr("y", function (d) {
                        return y(d.y);
                    })
                    .style("opacity", function (d) {
                        return k * d.r > 20 ? 1 : 0;
                    });

            node = d;
            d3.event.stopPropagation();
        }

    </script>
{% endblock %}